<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>黑马数码首页</title>
    <link rel="stylesheet" href="/css/load.css">
    <link rel="stylesheet" href="/css/init.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/bottom_info.css">
</head>
<body>
<div class="nav  clearFloat">
    <div class="w">
        <div class="nav_left">
            <a href="#">黑马数码</a>
        </div>
        <div class="nav_right" >
            <ul>
                <li><a href="/index">首页</a></li>
                <li><a href="/user/info/show">个人中心</a></li>
                <li><a href="javascript:;">帮助中心</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="top w">
    <ul currentIndex = "1">
        <li><a href="javascript:;"><img src="images/img1.jpg" /></a></li>
        <li><a href="javascript:;"><img src="images/img2.jpg" /></a></li>
        <li><a href="javascript:;"><img src="images/img3.jpg" /></a></li>
        <li><a href="javascript:;"><img src="images/img4.jpg" /></a></li>
        <li><a href="javascript:;"><img src="images/img2.jpg" /></a></li>
    </ul>
    <div class="left_btn ban_select">&#xe902;</div>
    <div class="right_btn ban_select">&#xe903;</div>
</div>
    <!--<div class="qiang-inner w clearFloat">


    </div>-->
<!-- TODO 秒杀-->
<div class="hot_goods w clearFloat">
    <div class="hot_good">
        <div class="hot_img"><img src="//g-search2.alicdn.com/img/bao/uploaded/i4/i2/2616970884/O1CN01PN5APC1IOubZoilPe_!!0-item_pic.jpg_580x580Q90.jpg"/></div>
        <div class="hot_info">
            <span>牛逼的照相机</span>
            &yen<i>100</i>
        </div>
    </div>
    <div class="hot_good">
        <div class="hot_img"><img src="//g-search2.alicdn.com/img/bao/uploaded/i4/i2/2616970884/O1CN01PN5APC1IOubZoilPe_!!0-item_pic.jpg_580x580Q90.jpg"/></div>
        <div class="hot_info">
            <span>牛逼的照相机</span>
            &yen<i>100</i>
        </div>
    </div>
</div>
<div class="good_nav w ">
    <div class="good_top clearFloat">
        <span id="sales_w">&#xea3a;</span>
        <span id="sales">销售量</span>
        <span id="price_w">&#xea3a;</span>
        <span id="price">价格</span>
        <span>条件查询：</span>
        <i>价格：</i>
        <input type="text" name="minPrice" id="minPrice">
        <i>至</i>
        <input type="text" name="maxPrice" id="maxPrice">
        <button type="button" >查询</button>
        </div>
     <div class="bottom">
        <div class="search">
            <span></span>
            <input type="text" placeholder="输入要搜索的关键词" id="q">
            <button type="button" id="qq">搜索</button>

        </div>
    </div>
    <div class="search_info">
    </div>
    <div class="hot_word">

    </div>
</div>

<div class="good_list w clearFloat">

</div>
<!--分页 后期用-->
<!--<div class="w">
    <div class="m_page clearFloat">
        <ul class="clearFloat">
            <a href="javascript:;" ><li>上一页</li></a>
            <a href="javascript:;" ><li class="currentPage">1</li></a>
            <a href="javascript:;"><li>2</li></a>
            <a href="javascript:;"><li>3</li></a>
            <a href="javascript:;"><li>4</li></a>
            <a href="javascript:;"><li>5</li></a>
            <a href="javascript:;"><li>下一页</li></a>
        </ul>
        <div class="total">共100页</div>
    </div>
</div>-->
<!--分页-->
<!--left-->

<div class="index_left">

    <div class="user_info">
        <div class="wenzhi">门店用户</div>
        <!--用户-->
        <div class="notlogin">
            <div class="user_head_img">
                <img id="user_img" src="images/no_login.jpg"/>
            </div>
            <!--未登录-->
            <div class="no_logn login_state">
                <i>Hi~欢迎来到黑马数码！</i>
                <a href="users/login.html"><span class="login">登录</span></a>
                <a href="users/register.html"><span class="register">注册</span></a>
            </div>
            <!--已登录-->
            <div class="user_infos">
                <div>昵称：</div>
                <div>积分：</div>
                <div id="log_out" class="log_out">&#xe907;</div>
            </div>
        </div>
    </div>
    <div class="left_info">
        <!--商品分类-->
        <div class="commodity">
            <ul></ul>
        </div>
        <div class="type_info">
            <ul>
               <!-- <li><a href="javascript:;">123456</a></li>
                <li><a href="javascript:;">123456</a></li>
                <li><a href="javascript:;">123456</a></li>
                <li><a href="javascript:;">123456</a></li>
                <li><a href="javascript:;">123456</a></li>-->
            </ul>
        </div>
    </div>
    <div id="user_pack_up" class="ban_select">
        <span>收起</span>
    </div>
</div>

<!--right-->
<div class="index_right">
    <div class="car">
        <div class="car_img">
            &#xe908;
        </div>
        <div class="car_num">
            +<span>0</span>
        </div>
    </div>
    <div class="gw ban_select">
        <a href="/car/showCar" ><span class="ban_select">购物车</span></a>
    </div>

</div>
<!--load-->
<div id="load_dv" class="w">
    <div id="load">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<!-- load end -->
<!-- index end -->
<div class="end w">
    <span>已经没有商品了</span>
</div>
<!-- index end -->
<!-- back top -->
<div class="toTop">
    <span></span>
</div>
<!-- back top -->
<!--top nav-->
<div class="top_nav">
    <div class="w">
        <div>
            <div class="nav_left log_min">
                <a href="#">黑马数码</a>
            </div>
        </div>
        <div class="bottom_min">
            <div class="search search_min">
                <span></span>
                <input type="text" placeholder="输入要搜索的关键词">
                <button type="button">搜索</button>
            </div>
            <div class="top_search_info">
            </div>
        </div>
    </div>
</div>
<!--top nav-->
<div class="bottom_out" th:fragment="bottom_info">
    <div class="bottom_inner w">
        <div class="service_inner clearFloat">
            <ul>
                <li><h4>多</h4>品类齐全，轻松购物</li>
                <li><h4 class="kuai">快</h4>多仓直发，极速配送</li>
                <li><h4 class="hao">好</h4>正品行货，精致服务</li>
                <li><h4 class="sheng">省</h4>天天低价，畅选无忧</li>
            </ul>
        </div>
        <div class="friend_link clearFloat">
            <ul>
            <li><a>关于我们</a></li>
            <li><a>联系我们</a></li>
            <li><a>联系客服</a></li>
            <li><a>友情链接</a></li>
            <li><a>隐私政策</a></li>
            </ul>
        </div>
        <div class="copyright">
            <span>©2018-2018 xiaou, Inc. All rights reserved.</span>
        </div>
    </div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/indexLoad.js"></script>
<script src="/js/searchKeyword.js"></script>
<script src="js/index.js" th:inline="javascript"></script>
<script src="popBox/layer.js"></script>
<script th:inline="javascript">
    $(function () {
        var username = /*[[${session.user?.username}]]*/ null;
        var $no_login = $(".no_logn");
        var $login = $(".user_infos");
        if(username != null){
            if($no_login.hasClass("login_state")){
                $no_login.removeClass("login_state");
            }
            $login.addClass("login_state");
            $login.find("div").eq(0).text("昵称："+username);
            $login.find("div").eq(1).text("积分："+/*[[${session.user?.credits}]]*/);
        }else{
            if($login.hasClass("login_state")){
                $login.removeClass("login_state");
            }
            $no_login.addClass("login_state");
        }
    });
</script>
</body>
</html>